import React from 'react'
import { Layout, Row, Col, Icon, Badge, Menu, Dropdown, Avatar, Modal, Button, Form, Input, message } from 'antd'
import { Link, withRouter } from 'react-router-dom'
import { upPwd } from '../../config/api'
import { Httpost } from '../../config/request'
import './index.less'

const { Header } = Layout;

class commonHeader extends React.Component {
  constructor() {
    super()
    this.state = {
      visible: false
    }
  }

  handleLogOut = () => {
    const { logout } = this.props
    logout().payload.promise.then(() => {
      this.props.history.replace('/login');
    });
  }

  handleOk = () => {
    const data = this.props.form.getFieldsValue()

    Httpost(upPwd, data).then((res) => {
      if (res.resultCode === 200) {
        message.success(res.msg)
        this.props.form.resetFields()
        this.props.history.replace('/login')
        this.setState({
          visible:false
        })
      } else {
        message.error(res.msg)
      }
    }).catch((res) => {

    })

  }
  handleCancel = () => {
    this.setState({
      visible: false
    })
  }
  upPwd = () => {
    this.setState({
      visible: true
    })
  }


  render() {
    const { profile } = this.props
    const { getFieldDecorator } = this.props.form;
    let username = profile.user ? profile.user.name : '';
    const menu = (
      <Menu>
        <Menu.Item>
          <a onClick={this.upPwd}>修改密码</a>
        </Menu.Item>
        <Menu.Item>
          <a onClick={this.handleLogOut}>注销</a>
        </Menu.Item>
      </Menu>
    );



    return (
      <div>
        <Header style={{ background: 'rgb(64, 64, 64)', padding: 0 }}>
          <Row type="flex" justify="end" align="middle">
            <Col span={1}>
              <Badge className="header-icon" count={5}>
                <Link to="/mailbox">
                  <Icon type="mail" />
                </Link>
              </Badge>
            </Col>
            <Col span={1}>
              <Dropdown overlay={menu}>
                <a className="ant-dropdown-link" href="#">
                  <Avatar style={{ verticalAlign: 'middle' }}>{username}</Avatar> <Icon type="down" />
                </a>
              </Dropdown>
            </Col>
          </Row>


        </Header>
        <Modal
          visible={this.state.visible}
          title="修改密码"
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          footer={[
            <Button key="back" onClick={this.handleCancel}>
              Return
               </Button>,
            <Button key="submit" type="primary" onClick={this.handleOk}>
              Submit
               </Button>,
          ]}
        >
          <section>
            <Form className="login-form">
              <Form.Item>
                {getFieldDecorator('username', {
                  rules: [{ required: true, message: 'Please input your username!' }],
                })(
                  <Input
                    prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                    placeholder="Username"
                  />,
                )}
              </Form.Item>
              <Form.Item>
                {getFieldDecorator('password', {
                  rules: [{ required: true, message: 'Please input your Password!' }],
                })(
                  <Input
                    prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                    type="password"
                    placeholder="Password"
                  />,
                )}
              </Form.Item>

            </Form>
          </section>
        </Modal>
      </div>
      // 

    )
  }
}


commonHeader = Form.create()(commonHeader);
export default withRouter(commonHeader)
